<template>
    <div class="uv-pv-box">
        <!-- <one-tab v-model="active" :styleType="2" size="mini" :lists="[{id:1,name:'UV'},{id:2,name:'PV'}]" @onChange="getVisitData"/> -->
        <div class="tab-view">
            <div class="item" @click="getVisitData(1)" :class="{'on':active==1}" v-t="'detail.uv'">UV</div>
            <div class="item" @click="getVisitData(2)" :class="{'on':active==2}" v-t="'detail.pv'">PV</div>
        </div>
        <ul class="">
            <li>
                <p v-t="'analysis.table1'">Total</p>
                <h5>{{visitData.totalVisit || 0}}</h5>
            </li>
            <li>
                <p v-t="'analysis.table2'">Today</p>
                <h5>{{visitData.dayVisit || 0}}</h5>
            </li>
            <li>
                <p v-t="'analysis.table3'">Week</p>
                <h5>{{visitData.weekVisit || 0}}</h5>
                
            </li>
            <li>
                 <p v-t="'analysis.table4'">Month</p>
                <h5>{{visitData.monthVisit || 0}}</h5>
            </li>
        </ul>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import oneTab from './oneTab.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       oneTab
    },
    props:{
        id:'',  // 统计对象id
        visitType:'' // 访问对象类型: 1-地图，2-场景，3-店铺，4-物品，5-城市，6-广告位，7-道具，8-DAO，9-NFT
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            active:1,
            visitData:{}
        })

        onMounted(()=>{
            if(props.id && props.visitType){
                //addVisit()
                getVisitData(1)
            }
        })
        const getVisitData = (type)=>{
            state.active = type
            store.dispatch('base/visit_statistics',{
                objectId:props.id,
                operateType:state.active,  //访问量：1-UV,2-PV，趋势图：11-小时，5-天，2-月
                visitTypeCode:parseInt(props.visitType)
            }).then(res =>{
                state.visitData = res.data || {}
            })
        }

        const addVisit = ()=>{
            store.dispatch('base/add_visit_object',{
                objectId:props.id,
                visitTypeCode:parseInt(props.visitType),
                walletAddress:state.userInfo.walletAddress
            })
        }

        return{
            ...toRefs(state),
            getVisitData
        }
    }
}
</script>

<style lang="scss" scoped>
    .uv-pv-box{
        font-size: 22px;
        font-weight: 500;
        background-color: #67F8FF50;
        color: #FFFFFF;
        border:1px solid #67F8FF;
        font-family: Inter-Medium, Inter;
        .tab-view{
            display: flex;
            justify-content: space-between;
            margin:0 auto;
            width:96%;
            .item{
                text-align: center;
                width:50%;
                font-size:24px;
                color: #ffffff50;
                padding:10px 0 5px 0;
                background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF50 100%);
            }.on{
                background: linear-gradient(180deg, rgba(0,74,217,0) 0%, #004AD9 100%);
                border-bottom:1px solid #67F8FF;
                color: #fff;
            }
        }
        ul{
            display: flex;
            list-style: none;
            background: rgba(26,117,251,0.2);
            margin:0 0 0 0;
            li{
                flex: 1;
                text-align: center;
                padding: 10px 0;
                line-height: 42px;
                h5{
                    font-size: 26px;
                    color: #67F8FF;
                    padding: 0;
                    margin: 0;
                    font-size: 500;
                }
                p{
                    font-size: 22px;
                    color: rgba(255,255,255,0.6);
                }
            }
        }
    }
</style>